
<template>
    <header class="Cheader fcb " :class="bgclor">
		<div class="middle">
			<div class="items flex h1 menuLeft">
				<c-logo class="logo h1" />
				<ul class="lnavbox flex">
					<!-- <li>快捷交易</li> -->
					<li @click="e_page_('kline')" v-text="Lang.leftNav[lang][2]">法币交易</li>
					<li @click="e_page_('c2c')" v-text="Lang.leftNav[lang][3]"></li>
					<li @click="e_page_('subCenter')" v-text="Lang.leftNav[lang][4]"></li>
					
					<!-- <li>ET</li> -->
					<!-- <li class="navs cur animation" v-text="Lang.leftNav[lang][0]" @click="e_page_('kline')" />
					<li class="navs cur animation" v-text="Lang.leftNav[lang][1]" @click="e_page_('c2c')" /> -->
				</ul>
			</div>	

			<div class="items flex h1 menuright">
				<ul class="rnavbox fcc">
					<c-signed v-if="signed" />
					<c-will-sign v-else/>
					<!-- <li class="navs fcc cur animation">
						<img class="img-set" :src="imgSet" @click="e_set">
					</li> -->
					<li class="langSelect cur animation">
						<hb-select :title="lang_choose" :list="langSelects" @select="e_select" class="Clang" :circle="true" />
					</li>
				</ul>
			</div>
		</div>
        
        
    </header>
</template>

<script>
import Lang from './lang.js'
import {cglang} from '@d/qsoft'
import imgSet from './set.svg'
import CwillSign from './willSign'
import Csigned from './signed'
import {vpost, vlink} from '@api'
export default {
	name: 'Cheader',
	data() {
		return {
			Lang,
			langSelects: [{value: 0, txt: '简体中文'}, {value: 1, txt: 'English'},{value: 2, txt: '한국어'},{value: 3, txt: '日本語'}],
			imgSet,
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		sj() {
			return this.$store.state.setting.subject
		},
		bgclor() {
			let sj = this.$store.state.setting.subject
			let bindex = this.$route.name === 'index'
			let re = ''
			if (bindex) {
				re = 'index-head'
			} else {
				re = 'sj-bg' + sj
			}
			return re
		},
		rightNavTxts0() {
			let lang = this.lang
			return Lang.rightNav0[lang]
		},
		lang_choose() {
			return Lang.langChoose[this.lang]
		},
		signed() {
			return this.$store.state.user.signed
		},
	},
	components: {
		'c-will-sign': CwillSign,
		'c-signed': Csigned,
	},
	created() {},
	methods: {
		e_select(i) {
			let langBox = ['cn', 'en','kor','japan']
			cglang(this, langBox[i])
			let dataInput = {
				lang: i,
			}
			//lang 0:中文  1:英文
			vpost(vlink.changeLang, dataInput).then(re => {})
			window.lang = langBox[i]
		},

		e_set() {
			let a = this.$store.state.setting.subject
			let b = a === 'black' ? 'white' : 'black'
			this.$store.commit('set_subject', b)
		},
		e_page_(s) {
			this.$router.push('/' + s)
		},
	},
}
</script>

<style scoped >
.Cheader {
	--h: 60px;
	width: 100%;
	min-width: 800px;
	height: 70px;
}
.index-head {
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;
	background: #04021f;
}
.sj-bgwhite {
	background-color: rgb(0, 0, 0);
}
.sj-bgblack {
	background-color: #171926;
}
.items {
	height: 70px;
}
.middle {
	width: 1200px;
	margin: 0 auto;
}
.menuLeft {
	width: 70%;
	float: left;
}
.menuright {
	float: right;
}
.logo {
	width: 22px;
	height: 30px;
	padding-left: 20px;
	display: inline-block;
	vertical-align: middle;
	margin-top: 20px;
}

.rnavbox {
	margin-right: 20px;
}
.navs {
	margin: 0 10px;
	font-size: 14px;
	line-height: var(--h);
	color: #c7cce6;
	font-weight: 100;
}
.navs:hover {
	color: var(--clr1);
}
.Clang {
	height: var(--h);
}
.img-set {
	width: 15px;
}
.langSelect {
	margin-left: 20px;
}
.lnavbox {
	align-items: center;
}
.lnavbox > li {
	color: #fcfdfd;
	width: 144px;
	text-align: center;
	font-size: 14px;
}
</style>